<template>
    <div class="back-prev">
      <!--返回按钮-->
      <button class="back-btn" @click="backFn" id="moveDiv" @mousedown="down" @touchstart="down"
              @mousemove="move" @touchmove="move"
              @mouseup="end" @touchend="end">
        <i class="iconfont icon-icon_reply" style="display: block"></i>
        返回
      </button>

    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
          return {
            flags: false,
            position: {
              x: 0,
              y: 0
            },
            nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
            clientHeight:0,
            clientWidth:0
          }
        },
        methods:{
          backFn(){
            this.$router.go(-1);
          },
          // 实现移动端拖拽
          down(){
            this.flags = true;
            var touch ;
            if(event.touches){
              touch = event.touches[0];
            }else {
              touch = event;
            }
            this.position.x = touch.clientX;
            this.position.y = touch.clientY;
            this.dx = moveDiv.offsetLeft;
            this.dy = moveDiv.offsetTop;
          },
          move(){
            if(this.flags){
              var touch ;
              if(event.touches){
                touch = event.touches[0];
              }else {
                touch = event;
              }
              this.nx = touch.clientX - this.position.x;
              this.ny = touch.clientY - this.position.y;
              this.xPum = this.dx+this.nx;
              this.yPum = this.dy+this.ny;

              if(this.xPum<0){
                this.xPum=0
              }
              if(this.xPum>(this.clientWidth-50)){
                this.xPum=this.clientWidth-50
              }
              if(this.yPum<0){
                this.yPum=0
              }
              if(this.yPum >(this.clientHeight-50)){
                this.yPum=this.clientHeight-50
              }

              moveDiv.style.left = this.xPum+"px";
              moveDiv.style.top = this.yPum +"px";
              //阻止页面的滑动默认事件
              document.addEventListener("touchmove",function(){
                event.preventDefault();
              },false);
            }
          },
          //鼠标释放时候的函数
          end(){
            this.flags = false;
          }
        },
        mounted(){
          this.clientHeight =   `${document.documentElement.clientHeight}`;
          this.clientWidth =   `${document.documentElement.clientWidth}`;
        }
    }
</script>

<style scoped>
  .back-prev .back-btn{
    position: fixed;
    bottom:100px;
    right:10px;
    background:rgba(0,0,0,.5);
    width:55px;
    height:55px;
    /*height:auto!important;*/
    color:#fff;
    font-size:12px;
    padding:12px 0;
    border-radius: 5px;
    line-height: initial;
    border:0;
  }
  .back-prev .back-btn .iconfont{
    font-size:12px;
  }
</style>
